<template>
  <div class="tol-right" :class="[pgShow ? 'show' : 'hide']" v-show="isBuild">
    <div>
      <div class="build_btns">
        <div class="btn-build btns-def">
          <i class="icons-public rim" @click="hHideZB"></i>
          <span>周边</span>
        </div>
        <!-- <div class="btn-build btns-def">
          <i class="icons-public loub" @click="changeLabel(72)"></i>
          <span>楼标</span>
        </div>
        <div class="btn-build btns-def" :class="[buildPTState ? 'act' : '']">
          <i class="icons-public pingp" @click="changePT"></i>
          <span>平铺</span>
        </div>
        <div class="btn-build btns-def" :class="[buildCTState ? 'act' : '']">
          <i class="icons-public chout" @click="changeCT"></i>
          <span>抽屉</span>
        </div> -->
        <div v-show="_act_flos?.length > 1" class="btn-build btns-def">
          <i class="icons-public fspace" @click="hFsMinMax">
            <!-- <i class="icons-public"> </i> -->
          </i>
          <span>拉伸</span>
          <input v-show="_showFsInput" class="input-build" type="range" min="0" max="100" v-model="_fspace" />
        </div>

        <div class="btn-build btns-def">
          <i class="icons-public wall" @click="hHideWall"></i>
          <span>墙体</span>
        </div>
        <div class="btn-build btns-def">
          <i class="icons-public tous" @click="hTsMinMax"></i>
          <span>透视</span>
          <input v-show="_showTsInput" class="input-build" type="range" min="0" max="100" v-model="_opacity" />
        </div>
        <div @click="hAll" class="btn-build btns-def">
          <i class="icons-public all"></i>
          <span>整栋</span>
        </div>
        <div class="btn-build btns-def" v-show="!multilayer" @click="multilayer = true">
          <i class="icons-public slayer"></i>
          <span>单层</span>
        </div>
        <div class="btn-build btns-def" v-show="multilayer" @click="multilayer = false">
          <i class="icons-public mlayer"></i>
          <span>多层</span>
        </div>
      </div>
      <div class="flos">
        <i class="pbtn" style="background-image: url(/imgs/floor/left.png)" @click="ToLeft(40)"></i>
        <div class="florBox">
          <div ref="moveFlorBox">
            <span v-for="item in datFlos" :class="{ act: item.act }" class="btns-def pbtn" @click="hFloChange(item)">
              <p>{{ item.flo }}F</p>
              <!-- <i class="icons-public flo"></i> -->
            </span>
          </div>
        </div>
        <i class="pbtn" style="background-image: url(/imgs/floor/right.png)" @click="ToLeft(-40)"></i>
      </div>
      <div class="bName"></div>
    </div>
    <!-- 楼层滚动 待完成... -->
    <div class="up-dow">
      <button class="btn_up"></button>
      <div class="floor_line"></div>
      <button class="btn_dow"></button>
    </div>
  </div>
</template>

<script setup>
// import { ElMessage } from "element-plus";
import { computed, reactive, nextTick, onMounted, onUnmounted, ref, watch, toRefs } from 'vue'

import { useStore } from 'vuex'
const store = useStore()
const pgShow = computed(() => store.state.pgShow)

const multilayer = ref(false)

const _act_flos = ref([])

const _fspace = ref(0)
const _opacity = ref(0)

const { datFlos, isBuild, scene3d, buildPTState } = toRefs(store.state)

watch(isBuild, (p) => {
  if (p) {
    multilayer.value = false
    hRefPage()
  }
})

const _isHideWall = ref(false)
const hHideWall = () => {
  _isHideWall.value = !_isHideWall.value
  // console.log(_isHideWall.value)
  window.s3d.SetWallVisible(!_isHideWall.value)
}
const hFloChange = (flo) => {
  console.log("楼层切换", datFlos.value);
  var flos = datFlos.value
  if (!multilayer.value) {
    for (var i = 0; i < flos.length; i++) {
      if (flos[i].flo != flo.flo) {
        flos[i].act = false
      } else {
        flo.act = true
      }
    }
    hOnChanged()
    return
  }
  var acts = datFlos.value.filter((t) => t.act)
  if (acts.length == 1 && acts[0].flo == flo.flo && flo.act) {
    return
  }
  flo.act = !flo.act
  hOnChanged()
}
const hAll = () => {
  multilayer.value = true
  var flos = datFlos.value
  for (var i = 0; i < flos.length; i++) {
    flos[i].act = true
  }
  hOnChanged()
}

// 显示隐藏楼标
const buildLabelIconState = ref(false),
  buildCTState = ref(false),
  changeLabel = (b) => {
    buildLabelIconState.value = !buildLabelIconState.value
    window.s3d.SetModIconState({
      enable: buildLabelIconState.value,
      typeId: b,
      modelType: -1
    })
  },
  changePT = () => {
    buildPTState.value = !buildPTState.value
    window.s3d.SetSceneFloPT(buildPTState.value)
  },
  changeCT = () => {
    buildCTState.value = !buildCTState.value
    window.s3d.SetSceneFloCT(buildCTState.value)
  }

//属性定义
const props = defineProps({
  _changed: {
    type: Function
  }
})
const moveFlorBox = ref()
const moveDistance = ref(0)
// 楼层移动事件
const ToLeft = (b) => {
  moveDistance.value += b
  console.log(moveDistance.value)
  if (moveDistance.value <= 0 && moveDistance.value > -(datFlos.value.length - 6) * 40) {
    moveFlorBox.value.style.left = moveDistance.value + 'px'
  } else {
    moveDistance.value -= b
  }

  // moveFlorBox.value.style.left = moveDistance.value + 'px'
}
const hOnChanged = () => {
  props._changed()
  var acts = datFlos.value.filter((t) => t.act).map((t) => t.flo)
  _act_flos.value = acts
  window.s3d.SetCurrentFloors(acts)
}

watch(_fspace, (fs) => {
  window.s3d.SetFloorSpace(fs / 10)
})
watch(_opacity, (op) => {
  window.s3d.SetOpacity(op)
})
const _showFsInput = ref(false)
const hFsMinMax = () => {
  if (_fspace.value == 0) {
    _fspace.value = 100
    _showFsInput.value = true
  } else {
    _fspace.value = 0
    _showFsInput.value = false
  }
}
const _isHideZB = ref(false)
const hHideZB = () => {
  _isHideZB.value = !_isHideZB.value
  window.s3d.SetSceneState(_isHideZB.value ? 1 : 0)
}
// 透明度拉伸
const _showTsInput = ref(false)
const hTsMinMax = () => {
  if (_opacity.value == 0) {
    _opacity.value = 100
    _showTsInput.value = true
  } else {
    _opacity.value = 0
    _showTsInput.value = false
  }
}

const hRefPage = () => {
  _fspace.value = 0
  _isHideWall.value = false
  _act_flos.value = datFlos.value?.filter((t) => t.act)
}
onUnmounted(() => { })

onMounted(() => {
  nextTick(() => {
    hRefPage()
  })
})
</script>

<style lang="scss" scoped>
* {
  color: #eee;
  -ms-user-select: none;
  user-select: none;
}

:root {
  --icon-w: 512px;
  --icon-h: 256px;
}

button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.tol-right {
  right: 643px;
  position: absolute;
  top: 41px;
  transition: all 0.5s;
  z-index: 101;
}

.tol-right.show {
  /* right: var(--aside-w); */
}

.tol-right.hide {
  right: 230px;
}

.btn-build {
  width: 47px;
  height: 47px;

  background-image: url(/imgs/floor/btn_bg.png);
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 100% 100%;
  position: relative;
  margin: 0 4px;

  span {
    position: absolute;
    top: -20px;
  }
}

.btn-build.act {
  background-image: url(/imgs/floor/btn_bg-1.png) !important;
}

.tol-right> :first-child {
  padding: 6px;
  width: auto;
  height: auto;
  position: absolute;
  transform: translate(-72%, -35%);
  display: flex;
}

.hidWell:hover {
  transform: scale(1.1);
}

.hidWell {
  margin-top: 20px !important;
}

.hidWell.enable {
  filter: brightness(0.5);
}

.tol-right button {
  /* border-radius: 2px; */
  /**background: #d5c2c23b;*/
  /* margin: 3px 6px;
  width: 90px;
  height: 30px; */
}

.tol-right button.act {
  /* background: linear-gradient(90deg, #eeeeee17, #ecc93ed1); */
}

.tol-right .btns-def:hover {
  transform: scale(1.1);
  /* box-shadow: 1px 1px 3px #000; */
  /* background: linear-gradient(90deg, #eeeeee17, #75d6ffd1); */
}

.build_btns {
  width: 330px;
  height: 54px;
  display: flex;
  align-items: center;
}

.bName {
  background-image: url(/imgs/index/bNameBg.png);
  width: 125px;
  height: 54px;
}

.flos {
  margin-right: 6px;
  display: flex;
  width: 349px;
  height: 54px;
  background-image: url(/imgs/floor/floorBg.png);
  background-size: 100% 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;

  .florBox {
    display: flex;
    width: 280px;
    overflow: hidden;

    div {
      display: flex;
      position: relative;
    }
  }

  span {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    // margin: 0 5px;
    justify-content: center;
  }

  .act {
    background-image: url(/imgs/floor/flo_bg.png);
    background-size: 100% 100%;
    // background: linear-gradient(180deg, #218cff, #5eacff);
    // opacity: 0.6;

    p {
      color: #ffffff;
      // line-height: 18px;
    }
  }

  p {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 17px;
    color: #444e57;
  }

  i {
    width: 10px;
    height: 10px;
  }
}

i.icons-public {
  width: 35px;
  height: 35px;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  // background-image: url(/imgs/icons/public.png) !important;
  // background-position: 1px 1px !important;
  // background-size: var(--icon-w) var(--icon-h) !important;
}

.input-build {
  position: absolute;
  transform: rotate(90deg);
  bottom: -80px;
}

// i.mlayer,
i.slayer {
  background-image: url(/imgs/floor/整栋.png);
  // width: 22px;
  // height: 22px;
}

i.mlayer {
  background-image: url(/imgs/floor/整栋.png);
  // background-position-y: -19px !important;
}

i.flo {
  background-image: url(/imgs/floor/整栋.png);
  // background-position: -37px -11px !important;
  // width: 20px;
  // height: 100%;
}

i.all {
  background-image: url(/imgs/floor/整栋.png);
  // height: 80%;
  // width: 20px;
  // background-position: -20px 2px !important;
}

i.wall {
  background-image: url(/imgs/floor/墙体.png);
  // height: 80%;
  // width: 20px;
  // background-position: -20px 2px !important;
}

i.mfspace {
  height: 40px;
  width: 40px;
  background-position: 0px -40px !important;
  margin-left: 20px;
}

i.mfspace i {
  height: 40px;
  width: 40px;
  background-position: -40px -40px !important;
  transform: scale(0.55);
}

i.fspace {
  background-image: url(/imgs/floor/拉伸.png);
}

i.rim {
  background-image: url(/imgs/floor/周边.png);
}

i.loub {
  background-image: url(/imgs/floor/楼标.png);
}

i.pingp {
  background-image: url(/imgs/floor/平铺.png);
}

i.chout {
  background-image: url(/imgs/floor/抽屉.png);
}

i.tous {
  background-image: url(/imgs/floor/透视.png);
}

div.fspace {
  position: relative;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  margin-top: 11px;
  margin-right: -9px;
}

i.fspace i {
  height: 35px;
  width: 40px;
  background-position: -79px -42px !important;
  transform: scale(0.6);
}

.fspace {
  position: relative;
}

.fspace input {
  transform: rotate(90deg);
  margin-top: 54px;
  width: 100px;
}

/* button.home {
		width: 60px;
		height: 60px;
		position: relative;
	}

	i.home {
		background-position: 4px -80px !important;
		width: 80px;
		height: 80px;
		transform: scale3d(0.75, .75, 1);
		position: absolute;
	} */
.up-dow {
  width: 20px;
  height: 100px;
  right: 90px;
  position: absolute;
  top: -35px;
  display: none;
}

.up-dow .btn_up {
  width: 100%;
  height: 20%;
  background-image: url(/imgs/icons/up.png) !important;
  background-repeat: no-repeat;
  background-size: 100%;
}

.up-dow .floor_line {
  width: 250%;
  height: 22%;
  background-image: url(/imgs/icons/bj36.png) !important;
  position: absolute;
  background-size: 99%;
  background-position: 5px 0px;
}

.up-dow .btn_dow {
  width: 100%;
  height: 20%;
  background-image: url(/imgs/icons/dow.png) !important;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-top: 28px !important;
}

.up-dow button:hover {
  transform: scale(1.1);
}
</style>
